<template>
	<view class="order">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		
		<uni-nav-bar left-icon="back" left-text="返回" title="订单结算"></uni-nav-bar>
		<view class="oreder_connter">
			<view class="site">
				<span class="site_left">+</span>
				<span class="site_right">
					<view class="tab" :class="{'active':index==tabIndex}" @tap="toggleTab(item,index)" v-for="(item,index) in tabList" :key="index">{{item.name}}</view>
					<w-picker 
						mode="region"
						:defaultVal="['浙江省','杭州市','滨江区']"
						:areaCode="['33','3301','330108']"
						:hideArea="false"
						@confirm="onConfirm" 
						ref="region"
						:timeout="true"
					></w-picker>
				</span>
			</view>
			<view class="goodsList">
				<ul>
					<li>
						<div class="goods_left">
							<image src="../static/logo.png" mode=""></image>
						</div>
						<div class="goods_right">
							<h5>标题</h5>
							<p>简介</p>
							<p>
								<span>￥7000</span>
								<span>x1</span>
							</p>
						</div>
					</li>
				</ul>
			</view>
			<view class="order_information_list">
				<ul>
					<li>
						<div class="li_sale" v-if="true">
							<span>优惠卷</span>
							<span>&gt;</span>
						</div>
						<div v-else class="sale_content">aaaaa</div>
					</li>
				</ul>
			</view>
			<view class="pay_way">
				<ul>
					<li @click="alter()">
						<span :style="payStyle"></span>
						<span>微信</span>
					</li>
					<li @click="alter()">
						<span :style="payStyle"></span>
						<span>支付宝</span>
					</li>
					<li @click="alter()">
						<span :style="payStyle"></span>
						<span>银联</span>
					</li>
				</ul>
			</view>
			<view class="orderSubmit">
				<span>合计:￥20</span>
				<span> 
					<button>提交</button>
				</span>
			</view>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	import uniNavBar from "@/components/uniapp/uni-nav-bar/uni-nav-bar.vue"

	export default {
		components:{
			wPicker,
			uniNavBar
		},
		data() {
			return {
				title: 'Hello',
				startYear:new Date().getFullYear(),
				mode:"range",
				defaultVal:[0,0,0,0,0,0,0],
				tabList:[
					{
						mode:"region",
						name:"选择地址"
					}
				],
				tabIndex:0,
				resultInfo:{
					result:""
				},
				linkList:[],
				payStyle: {
					background:"",
					border: ""
				},
				payPD: true
			}
		},
		computed:{
			
		},
		methods: {
			toggleTab(item,index){
				this.tabIndex=index;
				this.mode=item.mode;
				this.defaultVal=item.value;
				this.$refs[item.mode].show();
			},
			onConfirm(val){
				console.log(val.result);
				console.log()
				this.tabList[0].name = val.result
				this.resultInfo=val;
			},
			alter () {
				if (this.payPD) {
					this.payStyle.background = "#000000"
					this.payStyle.border = "0"
					this.payPD = false
				} else {
					this.payStyle.background = ""
					this.payStyle.border = ""
					this.payPD = true
				}
			},
			async getOrdel () {
				var data = await this.$http.orderService.getOrder({
					status: "1"
				})
				console.log(data)
			}
		},
		onShow () {
			this.getOrdel()
		}
	}
</script>

<style lang="stylus" scoped>
	ul,li
		list-style none
		margin 0
		padding 0
	
	.status_bar
		height: var(--status-bar-height);
		width: 100%;
	.order
		text-align: center
		height: 400upx
		.oreder_connter
			width 100%
			height 100upx
			.site
				width 100%
				height 100upx
				display flex
				justify-content space-between
				align-items center
				border-bottom 5upx dotted #a0a
				span:nth-child(1)
					height 100%
					display flex
					align-items center
					justify-content center
					flex-grow 2
					font-size 32upx
				span:nth-child(2)
					flex-grow 10
			.goodsList
				width 100%
				ul
					margin 0
					padding 0
					li
						list-style none
						display flex
						margin 0
						padding 0
						justify-content space-between
						align-items center
						width 100%
						height 105px
						.goods_left
							flex-grow 2
							height 90px
							padding-left 20upx
							box-shadow box-shadow
							image
								width 100%
								height 100%
						.goods_right
							flex-grow 10
							height 90px
							text-align left
							font-size 14px
							padding-left 10px
							padding-right 10px
							box-shadow box-shadow
							h5
								font-size 20px
								width 100%
							p
								width 100%
								display flex
								justify-content space-between
							
			.orderSubmit
				width 100%
				height 100upx
				position fixed
				bottom 0
				display flex
				justify-content space-between
				align-items center
				span:nth-child(1)
					margin-left 20px
				span:nth-child(2)
					margin-right 20px
					button
						border-radius 20px
						background #FF0000
						height 90%
						padding-left 40px
						padding-right 40px
			.order_information_list
				width 100%
				ul
					width 100%
					li
						width 100%
						border-bottom 1upx solid rgba(0,0,0,0.1)
						padding-top 10px
						padding-bottom 5px
						.li_sale
							width 100%
							display flex
							justify-content space-between
							span:nth-child(1)
								margin-left 10px
							span:nth-child(2)
								margin-right 10px
								color rgba(0,0,0,0.3)
			.pay_way
				width 100%
				ul
					width 100%
					li
						width 100%
						display flex
						justify-content space-between
						padding-top 15px
						padding-bottom 5px
						span:nth-child(1)
							width 15px
							height 15px
							border 1px solid #FF0000
							border-radius 50%
							margin-left 10px
						span:nth-child(2)
							margin-right 10px
							font-size 16px
			
	// .tab{
	// 	padding:20upx 0;
	// 	font-size: 32upx;
	// }
	// .tab.active{
	// 	color:#f00;
	// }
	// .result{
	// 	margin-top: upx;
	// 	font-size: 32upx;
	// }
	.uni-navbar--shadow
		box-shadow: none !important;
</style>
